<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Vis Network | Other | On Load Animation</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <h2>Vis.js network onLoad animation</h2>
    <p>easeIn functions accelerate from zero velocity.</p>
    <p>easeOut functions decelerate to zero velocity.</p>
    <p>
      easeInOut functions accelerate from zero till halfway then after the
      halfway point they decrease until zero.
    </p>
    <div>
      Onload Animation Easing Function -
      <select id="easingFunction">
        <option value="linear">linear</option>
        <option value="easeInQuad">easeInQuad</option>
        <option value="easeOutQuad">easeOutQuad</option>
        <option value="easeInOutQuad">easeInOutQuad</option>
        <option value="easeInCubic">easeInCubic</option>
        <option value="easeOutCubic">easeOutCubic</option>
        <option value="easeInOutCubic">easeInOutCubic</option>
        <option value="easeInQuart">easeInQuart</option>
        <option value="easeOutQuart">easeOutQuart</option>
        <option value="easeInOutQuart">easeInOutQuart</option>
        <option value="easeInQuint">easeInQuint</option>
        <option value="easeOutQuint">easeOutQuint</option>
        <option value="easeInOutQuint">easeInOutQuint</option>
      </select>
      <button
        onclick="createNetwork(document.getElementById('easingFunction').value);"
      >
        Demo Easing Function
      </button>
    </div>
    <p>
      For more information on easing functions check out
      <a href="http://easings.net/">easings.net</a>
    </p>
    <div id="mynetwork"></div>
    <script type="text/javascript">
      document.getElementById("easingFunction").selectedIndex = 0;
      function createNetwork(easingType) {
        var nodes = new vis.DataSet([
          { id: 1, label: "Node 1" },
          { id: 2, label: "Node 2" },
          { id: 3, label: "Node 3" },
          { id: 4, label: "Node 4" },
          { id: 5, label: "Node 5" },
        ]);

        var edges = new vis.DataSet([
          { from: 1, to: 3 },
          { from: 1, to: 2 },
          { from: 2, to: 4 },
          { from: 2, to: 5 },
        ]);

        var container = document.getElementById("mynetwork");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {};
        var network = new vis.Network(container, data, options);
        network.once("beforeDrawing", function () {
          network.focus(2, {
            scale: 12,
          });
        });
        network.once("afterDrawing", function () {
          network.fit({
            animation: {
              duration: 3000,
              easingFunction: easingType,
            },
          });
        });
      }
      createNetwork("linear");
    </script>
  </body>
</html>
